{% extends 'admin/common/base.html'%}

{% block head%}
<link rel="stylesheet" href="{{url_for('static', filename='admin/style/select.css')}}">
<script type="text/javascript" src="{{url_for('static', filename='admin/ueditor/ueditor.config.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='admin/ueditor/ueditor.all.min.js')}}/"></script>
<script type="text/javascript" src="{{url_for('static', filename='admin/ueditor/lang/zh-cn/zh-cn.js')}}"></script>
<style>
    input[type=radio] {
        position: inherit !important;
        opacity: 1;
        left: 0;
    }

    .radio-inline {
        display: flex;
        align-items: center;
        padding-top: 2px !important;
    }

    .radio-inline div {
        padding-left: 10px;
        /* margin-top: 1px; */
    }
</style>
{% endblock%}

{% block body %}
<!-- 头部 -->
{% include 'admin/common/top.html' %}
<!-- /头部 -->

<div class="main-container container-fluid">
    <div class="page-container">
        <!-- Page Sidebar -->
        {% include 'admin/common/left.html' %}
        <!-- /Page Sidebar -->
        <!-- Page Content -->
        <div class="page-content">
            <!-- Page Breadcrumb -->
            <div class="page-breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <a href="{{url_for('article.article')}}">文章管理</a>
                    </li>
                    <li class="active">添加文章</li>
                </ul>
            </div>
            <!-- /Page Breadcrumb -->

            <!-- Page Body -->
            <div class="page-body">
                <div class="row">
                    <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="widget">
                            <div class="widget-header bordered-bottom bordered-blue">
                                <span class="widget-caption">新增文章</span>
                            </div>
                            <div class="widget-body">
                                <div id="horizontal-form">
                                    <form class="form-horizontal" role="form"
                                        action="{{url_for('article.add_article')}}" method="post" novalidate="true"
                                        enctype="multipart/form-data">
                                        {{form.csrf_token}}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.title.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.title(class='form-control', placeholder='请输入标题')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        {% if form.title.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.title.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.category_id.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.category_id(class='form-control')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必选</p>
                                        </div>
                                        {% if form.category_id.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.category_id.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.author.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.author(class='form-control')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        {% if form.author.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.author.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.description.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.description(class='form-control')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        {% if form.description.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.description.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.pic.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.pic(class='form-control')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必需</p>
                                        </div>
                                        {% if form.pic.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.pic.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.keywords.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.keywords(class='form-control')}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必选</p>
                                        </div>
                                        {% if form.keywords.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.keywords.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.content.label}}</label>
                                            <div class="col-sm-6">
                                                <label>
                                                    <textarea name="content" id="content"></textarea>
                                                </label>
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>
                                        {% if form.content.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.content.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.click.label}}</label>
                                            <div class="col-sm-6">
                                                {{form.click(class='form-control', value="0", type="number")}}
                                            </div>
                                            <p class="help-block col-sm-4 red">* 必填</p>
                                        </div>

                                        <div class="form-group">
                                            <label for="username"
                                                class="col-sm-2 control-label no-padding-right">{{form.is_state.label}}</label>
                                            <div class="col-sm-6" style="display: flex;align-items: center;">
                                                <label class="radio-inline">
                                                    <input type="radio" name="is_state" id="is_state-1" value="1"
                                                        checked>
                                                    <div>是</div>
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" name="is_state" id="is_state-2" value="0">
                                                    <div>否</div>
                                                </label>
                                            </div>
                                        </div>
                                        {% if form.is_state.errors %}
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label no-padding-right"></label>
                                            <div class="col-sm-6 red">
                                                {% for msg in form.is_state.errors%}
                                                {{msg}}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        {% endif %}

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                {{form.submit(class='btn btn-default')}}
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block script%}
<script type="text/javascript" src="{{url_for('static', filename='admin/style/select.js')}}"></script>
<script>
    UE.getEditor('content', {
        serverUrl: "/admin/upload",
        initialFrameWidth: 'auto',
        initialFrameHeight: 400,
    });

    $(function () {
        $("#keywords").fSelect();
    })
</script>
{% endblock %}